<!DOCTYPE html>
<html>
<head>
    <title>事件冒泡演示</title>
    <style>
        .outer { padding: 50px; background: #ffcccb; color: #8b0000; font-weight: bold; }
        .inner { padding: 30px; background: #add8e6; color: #000080; font-weight: bold; }
        .button { padding: 10px; background: #90ee90; color: #006400; font-weight: bold; cursor: pointer; }
    </style>
</head>
<body>
    <div class="outer" onclick="alert('外层div被点击')">
        外层div
        <div class="inner" onclick="alert('内层div被点击')">
            内层div
            <button class="button" onclick="alert('按钮被点击')">点击按钮</button>
        </div>
    </div>
</body>
</html>
